<template>
	<div class="box_bconten">
		<!-- <el-form
			:inline="true"
			:model="state.form"
			class="demo-form-inline"
			:rules="rules2"
			status-icon
			ref="formRef"
			v-if="pageType !== 'view'"
		>
			<el-row>
				<el-col :span="6">
					<el-form-item
						label="合同结算计划:"
						label-width="180"
						prop="moneyFlowType"
					>
						<el-select
							v-model="state.form.moneyFlowType"
							disabled
							placeholder=""
						>
							<el-option
								v-for="v in options"
								:key="v.value"
								:label="v.label"
								:value="v.value"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="m-l10">
					<el-form-item label="" label-width="180" prop="value2">
						<el-date-picker
							v-model="state.form.value2"
							type="daterange"
							range-separator="-"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="4" class="m-l10">
					<el-form-item label="" label-width="180" prop="payableAmount">
						<el-input
							v-model="state.form.payableAmount"
							placeholder="请输入金额"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="2" class="m-l10">
					<el-button @click="handelAdd" v-if="pageType !== 'view'"
						>增加</el-button
					>
				</el-col>
			</el-row>
		</el-form>
		<el-row :gutter="24">
			<el-col :span="24"> </el-col>
		</el-row> -->
		<div class="form_table" v-if="pageType === 'view'">
			<el-table border :data="payList" style="width: 100%">
				<el-table-column prop="term" label="期数" min-width="50"/>
				<el-table-column prop="moneyFlowType" label="资金流向" min-width="80">
					<template #default="scope">
						<span v-for="v in options" :key="v.value">
							<span v-if="v.value == scope.row.moneyFlowType">{{
								v.label
							}}</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="settlementStartTime" label="计划付款开始" min-width="120"/>
				<el-table-column prop="settlementEndTime" label="计划付款结束" min-width="120"/>
				<el-table-column prop="payableAmount" label="预估金额" min-width="80"/>
				<el-table-column prop="" v-if="pageType !== 'view'" label="操作" min-width="80">
					<template #default="scope">
						<el-button size="small" @click="handelRemove(scope.row)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import {
	ElForm,
	ElFormItem,
	ElCol,
	ElRow,
	ElUpload,
	ElCheckbox,
	ElSelect,
	ElDatePicker,
	ElTable,
	ElMessage,
} from "element-plus";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const props = defineProps({
	payList: {
		type: Array,
	},
	pageType: {
		type: String,
		default: "",
	},
});

const state = reactive({
	form: {
		applyUserDeptName: "",
		settlementEndTime: "",
		settlementStartTime: "",
		status: "",
		term: "",
		payableAmount: "",
		value2: [],
		moneyFlowType: "2",
	},
	payList: [{}],
});

const rules2 = {
	term: [
		{
			required: true,
			message: "请输入期数",
			trigger: "change",
		},
	],
	moneyFlowType: [
		{
			required: true,
			message: "请选择资金流向",
			trigger: "change",
		},
	],
	payableAmount: [
		{
			required: true,
			message: "请输入金额",
			trigger: "change",
		},
	],
	value2: [
		{
			required: true,
			message: "请选择日期",
			trigger: "change",
		},
	],
};

const options = [
	{
		value: "2",
		label: "流出",
	},
	{
		value: "1",
		label: "流入",
	},
];

watch(
	() => state.form.value2,
	(value) => {
		// console.log(value);
		if (value.length > 0) {
			state.form.settlementStartTime = value[0];
			state.form.settlementEndTime = value[1];
		}
	}
);

const formRef = ref(null);
const handelAdd = () => {
	formRef.value.validate((valid, fields) => {
		if (valid) {
			const obj = {};
			for (let key in state.form) {
				var value = obj[key];
				obj[key] = state.form[key];
			}
			obj.term = props.payList.length + 1;

			if (props.payList.length === 0) {
				obj.term = 1;
			} else {
				obj.term = props.payList[props.payList.length - 1].term + 1;
			}

			props.payList.push(obj);
			formRef.value.resetFields();
		}
	});
};

const handelRemove = (row) => {
	// console.log(row);
	props.payList.filter((v, i) => {
		if (v.term === row.term) {
			props.payList.splice(i, 1);
		}
	});
};

const handelData = () => {
	return props.payList;
};
defineExpose({
	handelData,
});
</script>
<style lang="scss" scoped>
.box_bconten {
	width: 100%;
}
</style>
